<template>
  <div>
    <a-input-search placeholder="请名字" v-model="name" size="large" style="width: 40%;margin:5px 0" />
    <br />
    <a-input-search placeholder="请年龄" v-model="age" size="large" style="width: 40%;margin:5px 0" />
    <br />
    <a-input-search placeholder="请性别"
     v-model="sex" size="large" 
     @keydown.enter="onSearch"
     style="width: 40%;margin:5px 0" />
    <br />
    <!-- <a-button type="primary" enter-button @click="onSearch">提交</a-button> -->
    <div class="item_body" v-for="(item,index) in list" :key="index">
      <div>
        <span><b>名字：</b>{{item.name}}</span>
        <br />
        <span><b>年龄：</b>{{item.age}}</span>
        <br />
        <span><b>性别：</b>{{item.sex}}</span>
      </div>
      <div class="bianji">
        <span style="color:red;font-size:20px;cursor: pointer;" @click="del(index)">删除</span>
        <span style="color:#1890FF;font-size:20px;cursor: pointer;" @click="edit">修改</span>
      </div>
    </div>
    <!-- 模态框 -->
     <div>
    <!-- <a-button type="primary" @click="showModal">
      Open Modal
    </a-button> -->
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <p>姓名：<input type="text" v-model="name"></p>
      <p>年龄：<input type="text" v-model="age"></p>
      <p>性别：<input type="text" v-model="sex"></p>
    </a-modal>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
      sex: "",
      list: [],
      visible:false
    };
  },
  mounted() {},
  methods: {
    // 添加
    onSearch() {
      if (this.name.trim() == "") {
        return alert('年龄或性别未填写')
      }
      if (this.age.trim() == "") {
        return alert('姓名或性别未填写')
      }
      if (this.sex.trim() == "") {
        return alert('姓名或年龄未填写')
      }
      this.list.push({
        name: this.name,
        age: this.age,
        sex: this.sex,
      });
      console.log(this.name);
      this.name = [];
      this.age = [];
      this.sex = [];
    },
    // 删除
    del(index){
      this.list.splice(index,1)
      this.$message.success('删除成功')
    },
    // 修改
    edit(){
      this.visible = true;
    },
    // 修改成功
    handleOk(e){
      this.visible = false
      this.list.forEach((ele)=>{
        if(ele.name === this.name){
          ele.name = this.name
          ele.age = this.age
          ele.sex = this.sex
        }
      })
      this.name = ''
      this.age = ''
      this.sex = ''
    }
  },
};
</script>

<style scoped>
.item_body {
  width: 40%;
  border: 1px solid #eee;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 20px ;
  margin-top: 15px;
  
}
.bianji{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>